<template>
	<view class="content">
		
		<div class="top">
	        <image src="/static/logo1.jpg" mode="heightFix" class="logo"></image>
		    <view>{{name}}</view>
	    </div>
		<view class="pay">
			
			<view class="clo-000 f34  mt10 fwb">转账金额：</view>
			<view class="line">
				<text class="clo-000">¥</text>
				<view class="money" style="padding: 0 10px;">{{money}}</view>
				
			</view>
<!-- 			<view class="comment">
				
				<view class="r fwb">
					<text>实付金额
					：{{new_money}}元</text>
				</view>
			</view> -->
		</view>
		<!-- 键盘 -->
		<view class="keyboard" v-if="is_effective">
			<view class="left">
				<!-- <view v-for="item of 9" @tap="tapMoney(item)">{{item}}</view> -->
				<view @tap="tapMoney(1)">1</view>
				<view @tap="tapMoney(2)">2</view>
				<view @tap="tapMoney(3)">3</view>
				<view @tap="tapMoney(4)">4</view>
				<view @tap="tapMoney(5)">5</view>
				<view @tap="tapMoney(6)">6</view>
				<view @tap="tapMoney(7)">7</view>
				<view @tap="tapMoney(8)">8</view>
				<view @tap="tapMoney(9)">9</view>
				<view @tap="rest()">重输</view>
				<view @tap="tapMoney(0)">0</view>
				<view @tap="tapMoney('.')">.</view>
			</view>
			<view class="right">
				
				 <button type="submit" class="del iconfont" @tap="del()" >&#xe837;</button>
				<view class="sure" @tap="go()">确认付款</view>
			</view>
		</view>
		<view class="con pl50 pr50" v-show="discount_show">
			<div class="fwb" style=" color:red;display:flex;justify-content: space-between;">
			    <p>优惠金额：{{money_discount}}元</p>
			    <p>实际支付：{{money_real}}元</p>
			</div>
		</view>
		<!-- <ns-login ref="login"></ns-login> -->
	</view>
	
</template>

<script>
// import { provide } from 'vue';
// import {businessInfo} from '@/utils/api.js'

	export default {
		data() {
			return {
				discount_show:false,
				name:"这里显示店铺名称",
				memberInfo: {},
				money:'',
				cid: '',
				bid: '',
				uid: 0,
				ad_text:'',
				ad_id:'',
				money_real: 0,
				is_login: false,
				apptype:'',
				openId: '',
				is_pay: true,
				is_effective: true,
				limit_price:0,
				discount_percent:0,
				money_discount:0,
				link:{
					id:0,
					link:'',
					bao:0
				},
				rate:0,
			}
		},
		onLoad(e) {
            			 
			if(e && e.bid){
				this.bid = e.bid;
			}else{
				uni.showToast({
					title:'无效二维码',
					icon:'none'
				})
				
				return false;
			}
			
			if(e.uid){
				this.uid=e.uid
				uni.setStorageSync('uid',e.uid);
			}else{
				this.uid=uni.getStorageSync('uid')
			}
			
			// #ifdef H5
			let ua = window.navigator.userAgent.toLowerCase();
			//判断是不是微信
			if (ua.match(/MicroMessenger/i) == "micromessenger") {
			　　// 微信
				if(this.uid == 0){
					//  我需要先获取当前访问域名的url
					let host = window.location.host;
					let url= 'https://'+host+'/index.pay/cashier?bid='+this.bid;
					//获取用户微信授权信息
					window.location.href =url
				}
				this.apptype = "wechat";
			}else if (ua.match(/AlipayClient/i) == "alipayclient") {//判断是不是支付宝
			　　//支付宝
				ap.getAuthCode ({appId :'2021003192639205',scopes : [ 'auth_base' ]},
				function ( res ){
					// alert(res.authCode);
					aliH5Login({'code':res.authCode}).then(res=>{
						let data=res.data
						this.uid=data.uid
						uni.showToast({
							title:'用户id是：'+data.uid
						})
						uni.setStorageSync('uid',data.uid);
					})
				});
				this.apptype = "alipay";
			}else{
				uni.showToast({
					title:'请使用微信或支付宝扫码',
					icon:'none'
				})
			
				// return false;
			}
			// #endif
			
			// console.log(this.bid,this.uid)
			let data={'bid':this.bid}
			this.$http(this.$api.businessInfo,data).then(res=>{
				console.log(res)
				let data=res.data
				this.name=data.name
				this.limit_price=data.limit_price
				this.discount_percent=data.discount_percent
				// this.ad_text=data.link.link
				this.link=data.link
				if(data.logo){
					this.logo=data.logo
				}
				this.rate=data.rate
			}).catch(res=>{
				
			})
			
		},
		onShow(){
			// this.money=''
			// this.min_money = '';
			// this.new_money = '';
			uni.hideLoading()
		},
		methods: {
			tapMoney(e){
				var that=this
				var d=0
				var h=0
				for(var i=0;i<that.money.length;i++){
					if(that.money[i]=='.'){
						if (e=='.'){
							if(that.money.length)
							d+=1	
						}
						var h=that.money.length-i
					}
				}
				if(that.money.length==0&&e=='.'){
					this.money='0.'
				}
				//过滤输入的00
				if(that.money[0]==0){
				    if(e==0&&h<1){
						that.money=''
				    }else if(e!=0 ){
						if(e=='.'){
							that.money='0'
						}
				    } 
				}

				if(d<1&&h<3){
					this.money+=e
				}
	
				this.sum_money();
			},
			del(){
				var that=this
				that.money=that.money.slice(0,that.money.length-1);
				that.money_real = that.money;
				this.sum_money();
			},
			rest(){
				this.money='';
				this.money_real = 0;
				// this.min_money = "";
				// this.new_money = "0";
			},
			//重新计算支付金额
			sum_money(){
				if(this.money>0&&this.limit_price>0&&this.money>this.limit_price){
					// 这里是打折
					this.discount_show=true
					// console.log(1-this.discount_percent/100);
					let discount_money=this.money*this.rate*this.discount_percent/100
					this.money_real=(this.money-discount_money).toFixed(2)
					this.money_discount=(this.money-this.money_real).toFixed(2)
				}else{
					// 这里是原价
					this.money_real = this.money;		
					this.discount_show=false
				}
			},
			go(){
				if(this.money == 0){
					uni.showToast({
						title: "支付金额不能为0",
						icon: 'none',
						duration: 2000
					});
					this.is_pay = true;
					return false;
				}
				var that=this;
				uni.setClipboardData({data:this.link.link}).then(res=>{
					// console.log('复制了')
					this.recordLink();
					uni.showLoading({
						title: '请稍后'
					})
					let data={
						'bid':that.bid,
						 'uid':that.uid,
						'num':that.money,
					}
					that.apptype='wechat'
					if(that.apptype=='wechat'){
						// 这里是微信h5支付
						// console.log('我走对了')
						this.$http(this.$api.wxPay,data).then(res=>{
							let wechat=res.data
							// console.log(wechat)
							WeixinJSBridge.invoke(
								'getBrandWCPayRequest', wechat,
								function(res){
									// alert(res.err_msg);
									if(res.err_msg == "get_brand_wcpay_request:ok" ) {
										// 使用以上方式判断前端返回,微信团队郑重提示：
										// res.err_msg将在用户支付成功后返回
										// ok，但并不保证它绝对可靠。
									}
									else if (res.err_msg =='get_brand_wcpay_request:cancel'){
		
										location.reload()
									}
								}
							);
						}).catch(res=>{
							
						})
					}
				}).catch(res=>{
					
				})
				return
			},
			// 记录link点击记录
			recordLink(){
				if(this.link.id==0){
					return;
				}
				let data={'id':this.link.id,'bao_type':this.link.bao}
				this.$http(this.$api.linkRecord,data)
			},
			myPay(payData){
				//这里是微信
				if(this.provider=='weixin'){
					return uni.requestPayment({
						"provider": "wxpay", 
						timeStamp:payData.timeStamp,
						nonceStr:payData.nonceStr,
						package:payData.package,
						signType:payData.signType,
						paySign:payData.paySign,
						})	
				}

				if(this.provider=='alipay'){
					//这里是支付宝payData.tradeNo是字符串，为统一下单接口返回的tradeNo
					return uni.requestPayment({
						"provider": "alipay", 
						orderInfo:payData.tradeNo,
					})	
				}
			},
			//微信支付成功操作
			wxPaySuccess(data){
				uni.hideLoading();
				var that = this;
				uni.navigateBackMiniProgram({
					extraData: {
						payResult: 'success',//仅当支付成功并点击“完成”按钮情况下为success,其余情况为fail或空
						memberInfolength: Object.keys(that.memberInfo).length,
						money: that.money,
					},
					success(){

					},
					fail(err){
						console.log(err);
						that.payFail("支付不成功")
					}
				})
			},
			//支付成功操作
			paySuccess(data){
				uni.hideLoading()
				// if(Object.keys(this.memberInfo).length == 0){
				// 	uni.reLaunch({
				// 		url:'/pages/pay/success?money='+this.money
				// 	})

				// 	return false;
				// }
			},
			//支付失败操作
			payFail(res){
				console.log(res)
				this.money=''
				this.new_money = '';
				uni.hideLoading()
			}
		}
	}
</script>

<style>
	page {background: #ffffff; height: 100vh; overflow: hidden;}
	view{line-height: 1.3;}
	.top {background: #fff;  padding-top:15px; }
    .top view {color:#343434; text-align: center; font-size:14px;padding:15px 0; margin:0; font-weight:bold;}
	.logo {height:40px;      border-radius: 10px;    margin: 0px auto;  display: flex;    align-items: center;}
	.pay {margin-top: 20rpx;background: #fff;padding: 40rpx 25rpx; margin: 50rpx 30rpx 0 30rpx; border-radius: 25rpx; position: relative; z-index: 9;}
	.comment {display: flex;align-items: flex-start;justify-content: space-between;}
	
	.comment .r {color: #000; font-size: 14px;}
	.comment .r text {display: block;}
	.line { padding:15px 0 10px 0; margin:0; font-size:18px;font-weight: bold;   display: flex; justify-content: space-between;align-items: center;margin-bottom: 20rpx;}
	.line .money{font-size: 23px; border-bottom: 1px solid #000; height: 50px; line-height: 50px; }
	.line view {text-align: left; width: 100%; font-size: 50rpx;}
	.line text {font-size: 50rpx;  padding-top: 10rpx;}
	.keyboard view {text-align: center;}
	.keyboard {position: fixed; bottom: 0;left: 0;display: flex;width: 96%;padding: 0 2%; justify-content: space-between;background: #f8f8f8;padding-top: 20rpx;}
	.keyboard .left view,.keyboard .right view{background: #fff;border-radius: 15rpx; color: #222;}
	.keyboard .left{width: 73%;display: flex;flex-wrap: wrap;justify-content: space-between;}
	.keyboard .left view {width: 32%;height: 100rpx;line-height: 100rpx;margin-bottom: 10rpx;font-size: 36rpx;}
	.keyboard .right {width: 25%;}

	.keyboard .right .del {margin: 0;padding: 0;background: #fff; height: 78rpx;line-height: 78rpx; display: flex; align-items: center;justify-content: center;}
	.keyboard .right image{width: 24%;margin-bottom: 0;}
	.keyboard .right view.sure {background:linear-gradient(#7fdcf8,#00b9f1)!important;border:1px solid #00b9f1!important;color: #fff;writing-mode: tb-rl;width: 100%;text-align: center;display:flex;flex-direction:column;justify-content:center;padding: 40rpx 0;margin-top: 10rpx;letter-spacing: 12rpx; height: 340rpx;box-sizing: border-box;}
</style>